
import 'package:flutter/material.dart';

class AffixHeaderSliverPage extends StatefulWidget{
  const AffixHeaderSliverPage({super.key});

  @override
  State<AffixHeaderSliverPage> createState() => _AffixHeaderSliverPageState();
}

class _AffixHeaderSliverPageState extends State<AffixHeaderSliverPage> {

  List<ItemData> testData = [
        ItemData(groupName: '幻将术士', users: ['梦小梦', '梦千']),
        ItemData(
            groupName: '幻将剑客', users: ['捷特', '龙少', '莫向阳', '何解连', '浪封', '梦飞烟']),
        ItemData(groupName: '幻将弓者', users: ['巫缨', '巫妻孋', '摄王', '裔王', '梦童']),
        ItemData(
            groupName: '其他', users: List.generate(20, (index) => '小兵$index')),
      ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('SliverMainAxisGroup')),
      body: CustomScrollView(
        slivers: testData.map(_buildGroup).toList(),
      ),
    );
  }

  // 普通分组列表
  Widget _buildGroup(ItemData itemData) {
    return SliverMainAxisGroup(slivers: [
      SliverPersistentHeader(
        pinned: true,
        // floating: true,
        delegate: HeaderDelegate(itemData.groupName, () {
          setState(() {
            itemData.isExpanded = !itemData.isExpanded;
          });
        }),
      ),
      SliverList(
        delegate: SliverChildBuilderDelegate(
          (_, index) {
            return AnimatedCrossFade(
                firstChild: Container(height: 0.0),
                secondChild: _buildItemByUser(itemData.users[index]),
                firstCurve: const Interval(0.0, 0.6, curve: Curves.fastOutSlowIn),
                secondCurve: const Interval(0.4, 1.0, curve: Curves.fastOutSlowIn),
                sizeCurve: Curves.fastOutSlowIn,
                crossFadeState: itemData.isExpanded ? CrossFadeState.showSecond : CrossFadeState.showFirst,
                duration: kThemeAnimationDuration,
              );
          },
          childCount: itemData.users.length,
        ),
      ),
    ]);
  }

  Widget _buildItemByUser(String user) {
    return Container(
      alignment: Alignment.center,
      height: 56,
      child: Row(
        children: [
          const Padding(
            padding: EdgeInsets.only(left: 20, right: 10.0),
            child: FlutterLogo(size: 30),
          ),
          Text(
            user,
            style: const TextStyle(fontSize: 16),
          ),
        ],
      ),
    );
  }
}

// 列表头
class HeaderDelegate extends SliverPersistentHeaderDelegate {

  const HeaderDelegate(this.title, this.callback);

  final String title;
  final Function callback;

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return InkWell(
      onTap: () {
        callback();
      },
      child: Container(
        alignment: Alignment.centerLeft,
        color: const Color(0xffF6F6F6),
        padding: const EdgeInsets.only(left: 20),
        height: minExtent,
        child: Text(title)
      ),
    );
  }

  @override
  double get maxExtent => minExtent;

  @override
  double get minExtent => 40;

  @override
  bool shouldRebuild(covariant HeaderDelegate oldDelegate) => title != oldDelegate.title;
}

class ItemData {
  final String groupName;
  final List<String> users;
  bool isExpanded;

  ItemData({required this.groupName, this.isExpanded = true, this.users = const []});

  static List<ItemData> get testData => [
        ItemData(groupName: '幻将术士', users: ['梦小梦', '梦千']),
        ItemData(
            groupName: '幻将剑客', users: ['捷特', '龙少', '莫向阳', '何解连', '浪封', '梦飞烟']),
        ItemData(groupName: '幻将弓者', users: ['巫缨', '巫妻孋', '摄王', '裔王', '梦童']),
        ItemData(
            groupName: '其他', users: List.generate(20, (index) => '小兵$index')),
      ];
}

